<template>
  <div class="person">
    <h1>情况5: 监视上述的多个数据</h1>
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <h2>汽车: {{ person.car.c1 }} {{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar1">修改第一台车</button>
    <button @click="changeCar2">修改第二台车</button>
    <button @click="changeCarAll">修改整个车</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { reactive, ref, watch } from 'vue'
let person = reactive({
  name: '张三',
  age: 19,
  car: {
    c1: '奔驰',
    c2: '宝马'
  }
})

const changeName = () => {
  person.name += '~'
}
const changeAge = () => {
  person.age += 1
}
const changeCar1 = () => {
  person.car.c1 = '奥迪'
}
const changeCar2 = () => {
  person.car.c2 = '大众'
}
const changeCarAll = () => {
  // 不能改的是person整个地址,这里是地址里面的car的值
  person.car = {c1: '雅迪', c2: '艾玛'}
}

// 情况4: 监视响应式对象中的某个属性,且改属性时基本类型,要写成函数式
watch( () => person.name, (newV, oldV) => {
  console.log('person的name变化了', newV, oldV)
})

// watch(person.car, (newV, oldV) => {
//   // changeCarAll 检测不到
//   console.log('person的car变化了', newV, oldV)
// })

// ()=>person.car 等于给car包了函数,监视的是地址值
// 这时候 单纯的c1,c2变化 不关心, 整个car地址变化才触发监听
// watch(()=>person.car, (newV, oldV) => {
//   console.log('person的car变化了', newV, oldV)
// })


// 完美
watch(()=>person.car, (newV, oldV) => {
  console.log('person的car变化了', newV, oldV)
}, {deep: true})

</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>